<template>
  <div class="content">
    <el-card v-for="(itm,idx) in currentData" :key="idx">
      <div class="box-card">
        <img :src="require(`../images/numberIcon0${idx}.png`)" alt="">
        <div class="count-box">
          <h4>{{ itm.count }}</h4>
          <p>{{ itm.label }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topNumberData: [
        {
          numType: '0',
          numbers: [
            {
              label: '在建项目',
              count: '4',
            },
            {
              label: '延期任务',
              count: '0',
            },
            {
              label: '暂停任务',
              count: '0',
            },
            {
              label: '即将到期里程碑',
              count: '3',
            }
          ]
        },
        {
          numType: '1',
          numbers: [
            {
              label: '预算总额',
              count: '360.1万',
            },
            {
              label: '使用金额',
              count: '20.65万',
            },
            {
              label: '人员工时',
              count: '1420',
            },
            {
              label: '费用超支',
              count: '0',
            }
          ]
        },
        {
          numType: '2',
          numbers: [
            {
              label: '待售金额',
              count: '456万',
            },
            {
              label: '待付金额',
              count: '32.3万',
            },
            {
              label: '签约数量',
              count: '47',
            }
          ]
        },
        {
          numType: '3',
          numbers: [
            {
              label: '现存风险',
              count: '21',
            },
            {
              label: '临近风险',
              count: '0',
            },
            {
              label: '风险总数',
              count: '21',
            }
          ]
        },
        {
          numType: '4',
          numbers: [
            {
              label: '现存问题',
              count: '18',
            },
            {
              label: '奖励次数',
              count: '0',
            },
            {
              label: '惩罚次数',
              count: '0',
            },
            {
              label: '整改未完成',
              count: '26',
            }
          ]
        },
      ],
      currentData: []
    }
  },
  props: {
    currentTab: {
      type: String,
      default: '0'
    }
  },
  mounted() {
    this.currentData = this.topNumberData[0].numbers
  },
  watch: {
    currentTab() {
      this.currentData = this.topNumberData[Number(this.currentTab)].numbers
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  gap: 25px;
  .el-card {
    width: 100%;
    height: 100px;
    .box-card {
      display: flex;
      justify-content: space-around;
      align-items: center;
      img {
        width: 40px;
      }
      .count-box {
        height: 100%;
        width: 120px;
        text-align: center;
        h4 {
          margin: 0;
          font-size: 24px;
          font-weight: 900;
          color: rgb(11, 145, 11);
        }
        p {
          margin: 0;
          margin-top: 8px;
          font-size: 15px;
          font-weight: 900;
        }
      }
    }
  }
  .el-card:hover {
    border: 1px solid rgb(14, 175, 14);
  }
}
</style>
